<template>
  <div class="addaddress">
    <div class="head_title">
      <router-link
        to="/addressbook"
        tag="span"
        class="iconfont icon-fanhuijiantou"
      ></router-link>
      新增收货地址
    </div>
    <div class="wrapper">
      <div class="content">
        <!-- <div class="title">
                    <span>收货人：&nbsp;&nbsp;</span>
                <input type="text" placeholder="姓名">
                </div>
                <div class="title">
                    <span>手&nbsp;&nbsp;&nbsp;&nbsp;机：&nbsp;&nbsp;</span>
                <input type="text" placeholder="号码">
                </div>
                <div class="title">
                    <span>地&nbsp;&nbsp;&nbsp;&nbsp;区：&nbsp;&nbsp;</span>
                <input type="text" placeholder="姓名">
                </div>
                <div class="title">
                    <span>地&nbsp;&nbsp;&nbsp;&nbsp;址：&nbsp;&nbsp;</span>
                <input type="text" placeholder="详细地址">
                </div>
                <div class="title">
                    <span>邮&nbsp;&nbsp;&nbsp;&nbsp;编：&nbsp;&nbsp;</span>
                <input type="number" placeholder="邮编">
                </div>
                <div class="title">
                    <span>地址标签：</span>
                    <div class="checkout_address">
                        <div class="li">住宅</div>
                        <div class="li">公司</div>
                        <div class="li">学校</div>
                    </div>
                </div> -->
        <van-address-edit
          :area-list="areaList"
          show-postal
          show-set-default
          show-search-result
          :address-info="getReplaceObj()"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
        />
      </div>
    </div>
    <!-- <div class="save_button">保存地址</div> -->
  </div>
</template>

<script>
// import areaList from '../assets/address/area'
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      areaList,
      addressDta: [],
      addressId: null,
      name: null,
      tel: null,
      province: null,
      city: null,
      county: null,
      addressDetail: null,
      areaCode: null,
      postalCode: null,
      isDefault: null,
      AddressInfo: null,
    };
  },
  methods: {
    onSave(e) {
      // if (this.addressId) {
      //   console.log(this.addressId);
      // }
      this.addressId = this.addressId ? this.addressId : +new Date();

      let address = {
        addressId: this.addressId,
        name: e.name,
        tel: e.tel,
        province: e.province,
        city: e.city,
        county: e.county,
        addressDetail: e.addressDetail,
        areaCode: e.areaCode,
        postalCode: e.postalCode,
        isDefault: e.isDefault,
      };

      //JSON.stringify(data) 对象转字符串
      //JSON.parse(data)  根据json转对象
      this.addressDta = []; //先清空
      //创建新数据
      if (localStorage.getItem("addressDta")) {
        this.flag = true;
        let addressDta = JSON.parse(localStorage.getItem("addressDta"));
        this.addressDta = addressDta.filter(item => item.addressId != this.addressId);
      } else {
        // console.log(1);
        //首次添加
        if (address.isDefault) {
          this.addressDta.forEach(item => {
            item.isDefault = false;
        });
        }
        this.addressDta.unshift(address);
      }
      if (this.flag) {
        //把旧数据和新数据放到一起
        if (address.isDefault) {
          this.addressDta.forEach(item => {
            item.isDefault = false;
        });
        }
        this.addressDta.unshift(address);
      }
      //重新把数据添加到浏览器
      window.localStorage.setItem(
        "addressDta",
        JSON.stringify(this.addressDta)
      );
      // console.log(JSON.parse(localStorage.getItem("goodsData")));
      this.$router.back();
    },

    //获取替换数据
    getReplaceObj() {
      let obj = this.$route.query.data;
      // console.log(obj);
      if (obj) {
        this.addressId = obj.addressId;
        console.log(this.addressId);
        return {
          // id: obj.addressId, //收货人信息初始值
          name: obj.name, //姓名
          tel: obj.tel, //电话
          province: obj.addressDetail, //省份
          city: obj.city, //城市
          country: obj.county, //区县
          postalCode: obj.postalCode,
          areaCode: obj.areaCode,
          addressDetail: obj.addressDetail, //详细地址
          isDefault: obj.isDefault, //是否选择默认
        };
      } else {
        return {};
      }
    },
  },
  created() {
    // this.getReplaceObj();
  },
};
</script>

<style lang="scss" scoped>
.addaddress {
  height: 100%;
  background-color: #f2f2f2;
  .head_title {
    height: 50px;
    border-bottom: 1px solid #dcdcdc;
    position: relative;
    text-align: center;
    line-height: 49px;
    background-color: #fff;
    font-size: 19px;
    span {
      padding-left: 10px;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 50px;
      text-align: center;
      font-size: 28px;
      height: 50px;
    }
  }
  .save_button {
    width: 345px;
    height: 40px;
    margin: 10px auto;
    background-color: #ff463c;
    text-align: center;
    line-height: 40px;
    color: #fff;
    border-radius: 18px;
    font-size: 15px;
  }
  .wrapper {
    .content {
      margin-top: 6px;
      .title {
        padding: 0px 15px 0px 10px;
        height: 45px;
        background-color: #fff;
        align-items: center;
        display: flex;
        color: #a0a0a0;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        input {
          border: none;
        }
        .checkout_address {
          display: flex;
          .li {
            width: 60px;
            height: 28px;
            color: #c4c4c4;
            margin-left: 14px;
            margin-top: 8px;
            border: 1px solid #c4c4c4;
            text-align: center;
            line-height: 28px;
            border-radius: 5px;
          }
        }
      }
    }
  }
}
</style>